#main-chart {
	.axisLabel {
		position: absolute;
		text-align: center;
		font-size: 14px;
	}

	.yaxisLabel {
		top: 50%;
		left: 2px;
		transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-webkit-transform:  rotate(-90deg);
		transform-origin: 0 0;
		-o-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		-moz-transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
	}
	
	.xaxisLabel {
		top: -30px;
		right: 0px;
		width: 100%;
		padding-left: 30px;
	}
	
	div.legend > table {
		position: absolute;
		margin-top: 0px;
		left: 60px;
		display:inline-table;
		color: @mainText !important;
		
		tr {
			float: left;
			margin-right: 10px;
		}
		
		.legendColorBox > div {
			padding: 0 !important;
			border: transparent !important;
			margin-right: 5px;
			
			div {
				width: 18px !important;
				.border-radius(1px);
			}
		}
	}
}



/* Vertical Bar Chart
=================================================================== */
.verticalChart {
	
	margin: 10px;
	
    .singleBar {
        width: 6%;
        display:block;
        margin:0 2% 0% 2%;
        float: left;

        .bar {
            position: relative;
            height: 120px;
            background: @main;
            overflow: hidden;
            .border-radius(2px);

            .value {
                position: absolute;
                bottom: 0;
                width: 100%;
                background: @success;
                color: white;
                .border-radius(2px);

                span {
                    position: absolute;
                    font-size: 12px;
                    bottom: 0;
                    width: 100%;
                    height: 20px;
                    color: white;
                    text-shadow: 0px -1px 0px @success, 0px 1px 0px @success, 1px 0px 0px @success, -1px 0px 0px @success, -1px -1px 0px @success,-1px 1px 0px @success, 1px 1px 0px @success, 1px -1px 0px @success;
                    display: none;
                    text-align: center;
                }
            }
        }

        .title {
            margin-top: 5px;
            text-align: center;
			color: @mainText;
        }
    }
}

/* Browsers Stats
=================================================================== */
.browserStat.big {
	display:inline-block;
	width: 49%;
	text-align: center;
	margin-bottom: 20px;
	padding: 0px;
}

.browserStat {
	display:inline-block;
	width: 32%;
	text-align: center;
	margin: 0px;
	padding: 0px;
	
	span {
		display:block;
		text-align: center;
		margin-top: 10px;
	}	
}

/* Small Chart
=================================================================== */
.smallchart {
	background: white;
	text-align: center;
	margin-bottom: 30px;
	
	.title {
		padding: 10px;
		color: white;
		background: @border;
		margin: -1px -1px 0 -1px;
	}
	
	.content {
		padding: 40px 0px;
		background: @border;
		color: white !important;

		
		i {
			font-size: 40px;
			color: white;
		}
		
	}
	
	.value {
		padding: 10px;
	}
	
	.backgroundColorTitle;

}

/* Sparkline stats
=================================================================== */
.sparkLineStats {
	position: relative; 
	margin-bottom: -4px;
	
	ul {
		margin:0 0 0 -40px;
		list-style: none;
		
		li {
			margin-bottom: 0; 
			line-height: 32px; 
			padding-top:3px; 
			font-size: 12px;
			
			div {
				float: left;
				
				&:first-child {
					margin-right: 5px;
				}
			}
			
			.number {
				font-size: 17px;
				font-weight: 700; 
				padding:0px 0px 0px 2px; 
				color: @warning;
			}
						
			h4 {
				position: relative;
				border-bottom: 1px solid #c4c4c4; 
				padding-bottom: 0px; 
				margin-bottom: 10px; 
				line-height: 37px;
				.box-shadow(0 1px 0px rgba(255, 255, 255, 1));
			}
		}
	}
}

/* Chart.JS responsive fix
=================================================================== */
canvas.chartjs {
            width: 100% !important;
            max-width: 2000px;
            height: auto !important;
}


/* Box Stats
=================================================================== */
ul.stats {
	list-style: none;
	padding: 0;
	border-top: 1px solid @border;
	background: @main;
	margin: 20px -15px 0px -15px;
	.clearfix;
	
	li {
		position: relative;
		z-index: 2;
		width: 25%;
		border-right: 1px solid @border;
		float: left;
		text-align: center;
		padding: 20px 0px;
		margin: 0;
		overflow:hidden;
		
		&:fisrt-child {
			
		}
		
		&:last-child {
			border: none;
		}
		
		.bgchart {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: -1;
			top: 0px;
			left: 0px;
		}	
	}	
}